<template>
  <div class="dxf_container" v-loading="loading">
    <div class="canvasContainer" ref="canvasContainer"></div>
  </div>
</template>

<script>
import { downloadFile } from "@/api/file";
import { DxfViewer } from "dxf-viewer";
import * as three from "three";
import mainFont from "./fonts/Roboto-LightItalic.ttf";
import aux1Font from "./fonts/NotoSansDisplay-SemiCondensedLightItalic.ttf";
import aux2Font from "./fonts/HanaMinA.ttf";
import aux3Font from "./fonts/NanumGothic-Regular.ttf";
export default {
  //import引入组件才能使用
  components: {},
  props: {
    fileToken: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dxfUrl: "",
      loading: false,
      // dxfViewer: undefined,
      fonts: [],
      curProgressPhase: null,
      progressText: null,
      progress: null,
      isLoading: false,
      error: null,
      dxfOptions: {
        clearColor: new three.Color("#fff"),
        autoResize: true,
        colorCorrection: true,
        sceneOptions: {
          wireframeMesh: true,
        },
      },
    };
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getFile() {
      this.loading = true;
      downloadFile(this.fileToken).then((res) => {
        this.fonts = [mainFont, aux1Font, aux2Font, aux3Font];
        this.dxfViewer = new DxfViewer(
          this.$refs.canvasContainer,
          this.dxfOptions
        );
        this.dxfUrl = URL.createObjectURL(res.data);
        this.loadDxf(this.dxfUrl);

        this.loading = false;
      });
    },
    async loadDxf(url) {
      this.isLoading = true;
      this.error = null;
      try {
        await this.dxfViewer.Load({
          url,
          fonts: this.fonts,
          progressCbk: this._OnProgress.bind(this),
          workerFactory: DxfViewer.SetupWorker(),
        });
      } catch (error) {
        console.warn(error);
        this.error = error.toString();
      } finally {
        this.isLoading = false;
        this.progressText = null;
        this.progress = null;
        this.curProgressPhase = null;
      }
    },
    _OnProgress(phase, size, totalSize) {
      console.log("_OnProgress", phase, size, totalSize);
      if (phase !== this.curProgressPhase) {
        switch (phase) {
          case "font":
            this.progressText = "Fetching fonts...";
            break;
          case "fetch":
            this.progressText = "Fetching file...";
            break;
          case "parse":
            this.progressText = "Parsing file...";
            break;
          case "prepare":
            this.progressText = "Preparing rendering data...";
            break;
        }
        this.curProgressPhase = phase;
      }
      if (totalSize === null) {
        this.progress = -1;
      } else {
        this.progress = size / totalSize;
      }
    },
  },
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {},
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {
    this.getFile();
    // this.dxfViewer = new DxfViewer(this.$refs.canvasContainer, this.dxfOptions);
  },
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发执行
};
</script>
<style scoped lang="scss">
.dxf_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
  .canvasContainer {
    width: 100%;
    height: 500px;
  }
}
</style>
